<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>OSSJK 2.0</title>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta http-equiv="Access-Control-Allow-Origin" content="*">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="format-detection" content="telephone=no">
<meta http-equiv="Cache-Control" content="no-siteapp">
<link rel="stylesheet" href="../../../static/layui/css/layui.css" media="all" />
<link rel="stylesheet" href="../../../static/css/public.css" media="all" />
<link rel="stylesheet" href="../../../static/plugin/zTree/css/zTreeStyle/zTreeStyle.css" type="text/css">
<style>
.detailTable_text {
	font-weight: bold;
}
</style>
</head>
<body class="childrenBody">
	<form class="layui-form" lay-filter="formTest" id="form">
		<table class="layui-table mag0" id="projectGroup" lay-filter="projectGroup">
			<thead>
				<tr>
					<th>所属部门</th>
					<th>员工姓名</th>
					<th>担任角色</th>
					<th>备注</th>
					<th></th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td colspan="5">
						<div style="text-align: center">
							<a class="layui-btn layui-btn-xs" id="projectGroup-add">添加</a>
						</div>
					</td>
				</tr>
			</tbody>
		</table>
		<div class="magt10 layui-right">
			<div class="layui-input-block">
				<button type="button" class="layui-btn layui-btn-sm" lay-submit="" lay-filter="submit">提交</button>
				<button type="button" class="layui-btn layui-btn-sm layui-btn-primary close-btn">取消</button>
			</div>
		</div>
	</form>
	<div id="treeDiv" class="menuContent" style="display: none; position: absolute; background: white; border: 1px black solid; z-index: 999">
		<ul id="departmentTree" class="ztree" style="margin-top: 0; width: 160px;"></ul>
	</div>
	<script type="text/javascript" src="../../../static/js/jquery-2.1.1.min.js"></script>
	<script type="text/javascript" src="../../../static/layui/layui.js"></script>
	<script type="text/javascript" src="../../../static/js/index.js"></script>
	<script type="text/javascript" src="../../../static/plugin/zTree/js/jquery.ztree.core.js"></script>
	<script type="text/javascript" src="../../../static/custom/js/constant.js"></script>
	<script type="text/javascript" src="../../../static/custom/js/common.js"></script>
	<script type="text/javascript">
		layui.config({
			base : '../../../static/plugin/layui_extends/'
		}).extend({
			selectN : 'selectN'
		}).use([ 'selectN', 'form', 'laydate', 'layer' ], function() {
			var form = layui.form;
			var laydate = layui.laydate;
			var selectN = layui.selectN;
			var layer = parent.layer === undefined ? layui.layer : top.layer, $ = layui.jquery;
			var selectGroupApi = "../../../advisory/project/selectGroup";
			var toSelectGroupApi = "../../../advisory/project/toSelectGroup";
			var getEmployeeApi = "../../../getEmployee";
			var insertMethod = "post";
			var updateDetailMethod = "put";
			var toSelectGroupMethod = "get";
			var url=selectGroupApi;
			var method=insertMethod;

			//添加子项目
			$("#projectGroup-add").click(function() {
				$("#projectGroup-add").parent().parent().parent().before(projectGroupHtml());
				form.render(); // 更新全部
				//显示删除按钮
				$(".deleteitem-btn").show();	 
  				form.render();
			});

			var pid = getUrlParam("id");
			//拼接字段
			function projectGroupHtml(obj) {
				if (!obj) {
					obj = {
						dname:'',
						did:'',
						type : ''
					}
				}
				if (!obj.remarks) {
					obj.remarks = ''
				}
				var str = null;
				str += '<tr class="projectGroup">                                                                                                   ';
				str += '	<td>                                                                                                                                      ';
				str += '		<input type="text" class="layui-input pgdname" readonly lay-verify="required" value="'+obj.dname+'">         ';
				str += '		<input type="hidden" class="pgdid" name="pgdid" value="'+obj.did+'">                     ';
				str += '	</td>                                                                                                                                     ';
			    str += '	<td> <input type="hidden" class="layui-input pgpid"  name="pgpid" value="'+pid+'">                      ';
				str += '		<select name="pgeid" class="pgeid" lay-verify="required">                                                         ';
				str += '			<option value="">请选择员工</option>                                                                                    ';
				str += '		</select>                                                                                                                         ';
				str += '	</td>                                                                                                                                     ';
				str += '	<td>                                                                                                                                      ';
				str += '		<select name="pgtype" class="pgtype" lay-verify="required">                                                         ';
				str += '			<option value="">请选择角色</option>                                                                                    ';
				str += '			<option value="1"'+(obj.type==1?'selected':'')+'>组长</option>                                                                                    ';
				str += '			<option value="2"'+(obj.type==2?'selected':'')+'>咨询</option>                                                                                    ';
				str += '			<option value="3"'+(obj.type==3?'selected':'')+'>讲师</option>                                                                                    ';
				str += '		</select>                                                                                                                         ';
				str += '	</td>                                                                                                                                     ';
				str += '	<td><input type="text" class="layui-input pgremarks"  name="pgremarks" value="'+obj.remarks+'"></td>         ';
				str += '	<td><a class="layui-btn layui-btn-xs layui-btn-danger deleteitem-btn">删除</a></td>';
				str += '</tr>';
				return str;
			}
			
			$("tbody").on("click", ".deleteitem-btn", function() {
				$(this).parent().parent().remove();
				if ($(".projectGroup").length <= 1) {
					$(".deleteitem-btn").hide();
				}
			});
			
			
			var departmentIndex=0;
			//ztree
			var setting = {
				view : {
					dblClickExpand : false
				},
				data : {
					simpleData : {
						enable : true
					}
				},
				callback : {
					onClick : onClick
				}
			};
			function onClick(e, trepgeid, treeNode) {
				$(".pgdid").eq(departmentIndex).val(treeNode.id);
				$(".pgdname").eq(departmentIndex).val(treeNode.name);
				hideMenu();
				//查找员工
				loadAjax( "../../../getEmployee", "get", {
					"did" : treeNode.id
				}, function(response) {
					baseCallBack(response, function(response) {
						$(".pgeid").eq(departmentIndex).empty();
						var str = '<option value="">请选择</option>';
						for( data of response.data){
							str+='<option value="'+data.id+'">'+data.rname+'</option>';
						}
						$(".pgeid").eq(departmentIndex).append(str);
						form.render('select');
					});
				});
			}
			function showMenu(index) {
				var cityObj = $(".pgdname").eq(index);
				var cityOffset = $(".pgdname").eq(index).offset();
				departmentIndex=index;
				$("#treeDiv").css({
					left : cityOffset.left + "px",
					top : cityOffset.top + cityObj.outerHeight() + "px"
				}).slideDown("fast");
				$("body").bind("mousedown", onBodyDown);
			}
			function hideMenu() {
				$("#treeDiv").fadeOut("fast");
				$("body").unbind("mousedown", onBodyDown);
			}
			function onBodyDown(event) {
				if (!(event.target.id == "btn_treeSelect" || event.target.id == "treeDiv" || $(event.target).parents("#treeDiv").length > 0)) {
					hideMenu();
				}
			}
			$("tbody").on("click", ".pgdname",function() {
				showMenu($(".pgdname").index(this))
			});
			loadAjax( "../../../getDepartment", "get", null, function(response) {
				baseCallBack(response, function(response) {
					$.fn.zTree.init($("#departmentTree"), setting, response.data);
				});
			});
			
			//回显表单
			loadAjax( toSelectGroupApi+"/"+pid, toSelectGroupMethod, null, function(response) {
				baseCallBack(response, function(response) {
					console.log(response.data);
					var length = 0;
					for ( var i in response.data) {
						length++;
						$("#projectGroup-add").parent().parent().parent().before(projectGroupHtml(response.data[i]));
						//查找员工
						(function(index){
							loadAjax( "../../../getEmployee", "get", {
								"pgdid" : response.data[index].did
							}, function(response2) {
								baseCallBack(response2, function(response2) {
									console.log(index);
									$(".pgeid").eq(index).empty();
									var str = '<option value="">请选择</option>';
									for( data of response2.data){
										var selected = "";
										if(data.id== response.data[index].eid){
										 	selected="selected";
										}
								  		str+='<option value="'+data.id+'"'+selected+'>'+data.rname+'</option>';
									
									}
									$(".pgeid").eq(index).append(str);
									form.render('select');
								});
							});
						})(i);
						
					}
					if (length == 0) {
						$("#projectGroup-add").parent().parent().parent().before(projectGroupHtml());
					}
					if (length <= 1) {//隐藏删除按钮
						$(".deleteitem-btn").hide();
					}
					form.render();
				});
			});
			
			//提交表单
			form.on("submit(submit)", function(data) {
				for (var i = 0; i < $(".pgremarks").length; i++) {
					if ($(".pgremarks").eq(i).val() == '') {
						$(".pgremarks").eq(i).val(" ");
					}
				}
				loadAjax( url, method, $("#form").serialize(), function(response) {
					baseCallBack(response, parentReloadCallBack);
				});
				return false;
			})
		});
	</script>
</body>
</html>